<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator';
import type { ChapterInfo } from '@/api/novel/novel';

@Component({})
export default class ChapterPaging extends Vue {
  @Prop() chapter!: Pick<ChapterInfo, 'prev' | 'next'> & { novel: Pick<ChapterInfo['novel'], 'id'> };

  get nid() {
    return +(this.chapter.novel.id + '');
  }
}
</script>
<template>
  <div class="chapter-paging" v-if="chapter">
    <div class="chapter-paging-prev">
      <router-link v-if="chapter.prev" :to="'/novel/' + nid + '/chapter/' + chapter.prev.id" :title="chapter.prev.title"><el-icon><el-icon-back /></el-icon>&nbsp;上一篇</router-link>
      <span v-else role="button" aria-disabled="true" class="chapter-paging-disabled"><el-icon><el-icon-back /></el-icon>&nbsp;上一篇</span>
    </div>
    <div class="chapter-paging-toc">
      <router-link :to="'/novel/' + nid" title="目录"><el-icon><el-icon-memo /></el-icon></router-link>
    </div>
    <div class="chapter-paging-next">
      <router-link v-if="chapter.next" :to="'/novel/' + nid + '/chapter/' + chapter.next.id" :title="chapter.next.title">下一篇&nbsp;<el-icon><el-icon-right /></el-icon></router-link>
      <span v-else role="button" aria-disabled="true" class="chapter-paging-disabled">下一篇&nbsp;<el-icon><el-icon-right /></el-icon></span>
    </div>
  </div>
</template>
<style scoped>
.chapter-paging {
  margin: 20px 0;
  display: flex;
}

.chapter-paging-prev,
.chapter-paging-next {
  flex: 1;
  text-align: center;
  line-height: 30px;
}

.chapter-paging a,
.chapter-paging .chapter-paging-disabled {
  display: inline-block;
  line-height: 40px;
  padding: 0 1em;
  border-radius: 20px;
  text-decoration: none;
}

.chapter-paging a {
  border: 1px solid var(--el-border-color-light);
  color: var(--el-text-color);
}

.chapter-paging a:hover {
  color: var(--el-color-primary);
  box-shadow: var(--el-box-shadow-light);
}

.chapter-paging-disabled {
  border: 1px solid var(--el-border-color);
  color: var(--el-text-color-secondary);
}


.chapter-paging :deep(.el-icon) {
  vertical-align: middle;
}

.chapter-paging-prev {
  text-align: left;
}

.chapter-paging-next {
  text-align: right;
}

</style>
